<template>
  <div class="home">
    <!-- <div class="rem-box">rem</div> -->
    <div>
      <x-cell></x-cell>
      <x-upload></x-upload>
      <x-area @select="setArea"></x-area>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="top-info info-1">
          <div>
            <div>355</div>
            <div>用户数</div>
          </div>
          <i class="el-icon-star-off icon"></i>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="top-info info-2">
          <div>
            <div>190</div>
            <div>商品数</div>
          </div>
          <i class="el-icon-goods icon"></i>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="top-info info-3">
          <div>
            <div>5000</div>
            <div>今日交易</div>
          </div>
          <i class="el-icon-tickets icon"></i>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:15px">
      <el-col :span="16">
        <div class="main-content left">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="main-content right">
          <x-upload type="imgDrag"></x-upload>
          <x-upload type="avatar"></x-upload>
        </div>
      </el-col>
    </el-row>
    
    <el-row>
      <el-col :span="12">
        <el-input v-model="num1" @input="(e) => {num1 = e.replace(/[^\d]/g,'')}" label=""></el-input>
        <el-input v-model="num2" @change="(e) => {num2 = e.replace(/[^\d]/g,'') > num1 ? e.replace(/[^\d]/g,'') : num1}" :min="num1" label=""></el-input>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
    <div>当前字体</div>
    <sx-common-form-richtext id="rich" v-model="richText" tinymcePath="./tinymce-5.1.1/"></sx-common-form-richtext>
  </div>
</template>

<script>
  import xUpload from '@/components/x-upload.vue'
  import SxCommonFormRichtext from 'sx-common-form-richtext'
  import 'sx-common-form-richtext/theme-default/lib/index.css'
  export default {
    data() {
      return {
        ttt:'',
        richText:'<p>富文本</p>',
        num1:0,
        num2:0,
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    components: {
      xUpload,
      SxCommonFormRichtext
      // MyDate
    },
    created() {
      // let myDate = this.$com.formatTime('Y-M-D h:m:s',new Date().getTime())
      // console.log(myDate)
    },
    methods: {
      setNum2(e){
        let val = e.replace(/[^\d]/g,'')
        this.num2 = val > this.num1 ? val : this.num1
      },
      handleNodeClick(data) {
        console.log(data);
      },
      setArea(e) {
        console.log(e)
      }
    }
  }

</script>

<style lang="scss">
body{
  font-size: 0.14rem;
}
// .rem-box{
//   width: 9.6rem;
//   height: 9.6rem;
//   background: gold;
//   position: fixed;
//   top: 0;
//   left: 0;
//   z-index: 999;
// }
  .home {
    .top-info {
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      font-size: 20px;
      line-height: 36px;
      color: #fff;

      .icon {
        color: #fff;
        opacity: 0.7;
        font-size: 60px;
      }
    }

    .info-1 {
      background: linear-gradient(to right, rgba(240, 224, 6, 1), rgba(240, 224, 6, 0.5))
    }

    .info-2 {
      background: linear-gradient(to right, rgba(6, 240, 37, 1), rgba(6, 240, 37, 0.5))
    }

    .info-3 {
      background: linear-gradient(to right, rgba(240, 72, 6, 1), rgba(240, 72, 6, 0.5))
    }

    .main-content {
      // box-shadow: 0px 0px 5px 5px #f8f8f8;
      height: 800px;
      background: #fff;

      .left {}

      .right {}
    }
  }

</style>
